<template>
  <view class="page" :style="themeColor">
    <view class="flex align-stretch benben-position-layout flex permissionSetting_flex_0"
      :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
      <view class='flex align-center justify-between flex-sub permissionSetting_fd0_0'>
        <view class='flex align-center permissionSetting_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
          data-url="1">
          <text class='fu-iconfont2  permissionSetting_fd0_0_c0_c0'>&#xE794;</text>
        </view>
        <view class='flex align-center'>
          <text class='permissionSetting_fd0_0_c1_c0'>{{$t('权限设置')}}</text>
        </view>
        <view class='flex align-center permissionSetting_fd0_0_c2'>
        </view>
      </view>

    </view>
    <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
    <!---权限设置flex布局开始-->
    <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout permissionSetting_flex_1">
      <view class='flex flex-wrap align-center permissionSetting_fd1_0'>
        <text class='permissionSetting_fd1_0_c0'>{{$t('为了向您提供更好的用户体验')}}
          {{$t('小程序会在特定场景下向您申请一下手机系统权限')}}</text>
      </view>
      <!--    <view class='flex flex-wrap align-center permissionSetting_fd1_1' @click="changePermission('location','android.permission.ACCESS_FINE_LOCATION')">
        <view class='flex flex-direction flex-wrap align-stretch flex-sub'>
          <text class='permissionSetting_fd1_1_c0_c0'>{{$t('位置信息')}}</text>
          <text class='permissionSetting_fd1_1_c0_c1'>{{$t('根据您的位置为您推荐周边的服务')}}</text>
        </view>
        <text class='permissionSetting_fd1_1_c1'>{{$t('已开启')}}</text>
        <text class='fu-iconfont2  permissionSetting_fd1_1_c2'>&#xe7f2;</text>
      </view> -->
      <view class='flex flex-direction flex-wrap align-stretch permissionSetting_fd1_2'
        @click="changePermission('camera','android.permission.CAMERA')">
        <view class='flex flex-wrap align-center permissionSetting_fd1_2_c0'>
          <view class='flex flex-direction flex-wrap align-stretch flex-sub'>
            <text class='permissionSetting_fd1_2_c0_c0_c0'>{{$t('相机权限')}}</text>
            <text class='permissionSetting_fd1_2_c0_c0_c1'>{{$t('实现拍照、录视频')}}</text>
          </view>
          <text class='permissionSetting_fd1_2_c0_c1'>{{isCamera ? $t('已开启') : $t('已关闭')}}</text>
          <text class='fu-iconfont2  permissionSetting_fd1_2_c0_c2'>&#xe7f2;</text>
        </view>
      </view>
      <view class='flex flex-direction flex-wrap align-stretch permissionSetting_fd1_3'
        @click="changePermission('photoLibrary','android.permission.READ_EXTERNAL_STORAGE')">
        <view class='flex flex-wrap align-center permissionSetting_fd1_3_c0'>
          <view class='flex flex-direction flex-wrap align-stretch flex-sub'>
            <text class='permissionSetting_fd1_3_c0_c0_c0'>{{$t('存储权限')}}</text>
            <text class='permissionSetting_fd1_3_c0_c0_c1'>{{$t('用于图片或视频的上传')}}</text>
          </view>
          <text class='permissionSetting_fd1_3_c0_c1'>{{isphotoLibrary ? $t('已开启') : $t('已关闭')}}</text>
          <text class='fu-iconfont2  permissionSetting_fd1_3_c0_c2'>&#xe7f2;</text>
        </view>
      </view>
    </view>
    <!---权限设置flex布局结束-->

  </view>
</template>
<script>
  import permision from "@/js_sdk/wa-permission/permission.js"
  export default {
    components: {},

    data() {
      return {
        isIos: true,
        isLocation: false,
        isCamera: false,
        isphotoLibrary: false
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    async onLoad(options) {
      this.isIos = (plus.os.name == "iOS");
      if (this.isIos) {
        // 位置权限
        this.isLocation = permision.judgeIosPermission("location");

        // 相机权限
        this.isCamera = permision.judgeIosPermission("camera");

        // 存储权限
        this.isphotoLibrary = permision.judgeIosPermission("photoLibrary");

      } else {

        // 位置权限
        let result = await permision.requestAndroidPermission("android.permission.ACCESS_FINE_LOCATION");
        if (result == 1) {
          this.isLocation = true;
        } else {
          this.isLocation = false;
        }

        // 相机权限
        let result1 = await permision.requestAndroidPermission("android.permission.CAMERA");
        if (result1 == 1) {
          this.isCamera = true;
        } else {
          this.isCamera = false;
        }

        // 存储权限
        let result2 = await permision.requestAndroidPermission(
          "android.permission.READ_EXTERNAL_STORAGE"); //外部存储(含相册)读取权限
        let result3 = await permision.requestAndroidPermission(
          "android.permission.WRITE_EXTERNAL_STORAGE"); //外部存储(含相册)写入权限
        if (result2 == 1 && result3 == 1) {
          this.isphotoLibrary = true;
        } else {
          this.isphotoLibrary = false;
        }
        console.log('this.isphotoLibrary = true;', this.isCamera, this.isphotoLibrary)
      }
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      changePermission(permisionID1, permisionID2) {
        this.isIos = (plus.os.name == "iOS");
        if (this.isIos) {
          this.judgeIosPermission(permisionID1)
        } else {
          this.requestAndroidPermission(permisionID2)
        }
      },
      judgeIosPermission: function(permisionID) {
        var result = permision.judgeIosPermission(permisionID)
        console.log(result);
        if (result) {
          permision.gotoAppPermissionSetting()
        }
      },
      async requestAndroidPermission(permisionID) {
        var result = await permision.requestAndroidPermission(permisionID)

        if (result == 1) {
          permision.gotoAppPermissionSetting()
        }
      },
      gotoAppPermissionSetting: function() {
        permision.gotoAppPermissionSetting()
      },
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #f7f3ed;
    background-size: 100% auto !important;
  }

  .permissionSetting_flex_0 {
    border-bottom: 1px solid #eee;
    background: #f7f3ed;
    background-size: 100% !important;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .permissionSetting_fd0_0_c2 {
    width: 100rpx;
  }

  .permissionSetting_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
  }

  .permissionSetting_fd0_0_c0_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
  }

  .permissionSetting_fd0_0_c0 {
    width: 100rpx;
  }

  .permissionSetting_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
  }

  .permissionSetting_flex_1 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .permissionSetting_fd1_3_c0_c2 {
    font-size: 26rpx;
    color: #333;
  }

  .permissionSetting_fd1_3_c0_c1 {
    color: rgba(153, 153, 153, 1);
    font-size: 32rpx;
    font-weight: 400;
    line-height: 45rpx;
    margin: 0rpx 16rpx 0rpx 16rpx;
  }

  .permissionSetting_fd1_3_c0_c0_c1 {
    color: rgba(153, 153, 153, 1);
    font-size: 24rpx;
    font-weight: 400;
    line-height: 33rpx;
    margin: 8rpx 0rpx 0rpx 0rpx;
  }

  .permissionSetting_fd1_3_c0_c0_c0 {
    color: #2A2A2A;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 45rpx;
  }

  .permissionSetting_fd1_3_c0 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .permissionSetting_fd1_3 {
    background: #ebe4d9;
    background-size: 100% !important;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background-size: 100% auto !important;
    padding: 0rpx 24rpx 0rpx 24rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .permissionSetting_fd1_2_c0_c2 {
    font-size: 28rpx;
    color: #333;
  }

  .permissionSetting_fd1_2_c0_c1 {
    color: rgba(153, 153, 153, 1);
    font-size: 32rpx;
    font-weight: 400;
    line-height: 45rpx;
    margin: 0rpx 16rpx 0rpx 16rpx;
  }

  .permissionSetting_fd1_2_c0_c0_c1 {
    color: rgba(153, 153, 153, 1);
    font-size: 24rpx;
    font-weight: 400;
    line-height: 33rpx;
    margin: 8rpx 0rpx 0rpx 0rpx;
  }

  .permissionSetting_fd1_2_c0_c0_c0 {
    color: #2A2A2A;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 45rpx;
  }

  .permissionSetting_fd1_2_c0 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .permissionSetting_fd1_2 {
    background: #ebe4d9;
    background-size: 100% !important;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background-size: 100% auto !important;
    padding: 0rpx 24rpx 0rpx 24rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .permissionSetting_fd1_1_c2 {
    font-size: 28rpx;
    color: #333;
  }

  .permissionSetting_fd1_1_c1 {
    color: rgba(153, 153, 153, 1);
    font-size: 32rpx;
    font-weight: 400;
    line-height: 45rpx;
    margin: 0rpx 16rpx 0rpx 16rpx;
  }

  .permissionSetting_fd1_1_c0_c1 {
    color: rgba(153, 153, 153, 1);
    font-size: 24rpx;
    font-weight: 400;
    line-height: 33rpx;
    margin: 8rpx 0rpx 0rpx 0rpx;
  }

  .permissionSetting_fd1_1_c0_c0 {
    color: #2A2A2A;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 45rpx;
  }

  .permissionSetting_fd1_1 {
    background: #ebe4d9;
    background-size: 100% !important;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background-size: 100% auto !important;
    padding: 32rpx 24rpx 32rpx 24rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .permissionSetting_fd1_0_c0 {
    color: var(--benbenFontColor0);
    font-size: 24rpx;
    font-weight: 400;
    line-height: 33rpx;
  }

  .permissionSetting_fd1_0 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }
</style>